<template>
  <div id="get">
    <img src="./../../assets/logo.png"> 
    <h1 >{{ msg }}</h1>
    <h2 >产品ID：{{ id }}</h2>
    <h2>产品名称：{{ name }}</h2>
    <h2>食品种类：{{ project }}</h2>
    <h2>产品原产地：{{ location }}</h2>
    <h2>录入人员：{{ creator }}</h2>
    <h2>录入时间：{{ time }}</h2>

  </div>
</template>

<script>
import axios from 'axios'
var searchURL = window.location.search
searchURL = searchURL.substring(1, searchURL.length);  
var targetPageId = searchURL.split("&")[0].split("=")[1];

export default {
  name: 'get',
  data () {
    return {
      msg: '欢迎使用',
      id : null,
      name: null,
      location: null,
      creator: null,
      time: null,
      project:null,
    }
  },
    methods: {
     getData() {
      const url = `http://10.78.34.150:8082/v1/trace/get?uid=${targetPageId}`;
      console.log('[Airport getData] url', url);
      console.log('searchURL', searchURL);
      axios.get(url).then((res)=>{
              this.id = res.data.data.ID
              this.name = res.data.data.Name
              this.location = res.data.data.Location
              this.creator = res.data.data.Creator
              this.time = res.data.data.Time
              this.project = res.data.data.Project
              console.log(3333333,res)
      });
    },
  },
  mounted(){
    this.getData()
    const that = this
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

</style>
